<template>
  <div>
    <!--头部-->
    <header class="publicHeader">
      <h1>超市订单管理系统</h1>
      <div class="publicHeaderR">
        <p><span>下午好！</span><span style="color: #fff21b"> {{nickName}}</span> , 欢迎你！</p>
        <a href="javascript:;" @click="logout">退出</a>
      </div>
    </header>
    <!--时间-->
    <section class="publicTime">
      <span id="time">2015年1月1日 11:11  星期一</span>
      <a href="#">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
    </section>
    <!--主体内容-->
    <section class="publicMian ">
      <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
          <ul class="list">
            <li><a href="jsp/bill.do?method=query">订单管理</a></li>
            <li><a href="#/providerManager">供应商管理</a></li>
            <li><a href="#/userManager">用户管理</a></li>
            <li><a href="#/changePassword">密码修改</a></li>
            <li><a href="javascript:;" @click="logout">退出系统</a></li>
          </ul>
        </nav>
      </div>
      <div class="right">
        <div class="location">
          <strong>你现在所在的位置是:</strong>
          <span>用户管理页面</span>
        </div>
        <div class="search">
          <span>用户名：</span>
          <input v-model="userName" class="input-text" type="text" value="">

          <span>用户角色：</span>
          <select name="queryUserRole">

            <option value="0">--请选择--</option>
            <option
                value="1">系统管理员
            </option>
            <option
                value="2">经理
            </option>
            <option
                value="3">普通员工
            </option>
          </select>

          <input type="hidden" name="pageIndex" value="1"/>
          <input value="查 询" type="submit" id="searchbutton" @click="searchUser">
          <a :href="'#/userSave/'+result.pages+'/'+result.total">添加用户</a>
        </div>
        <!--用户-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
          <tr class="firstTr">
            <th width="10%">用户编码</th>
            <th width="20%">用户名称</th>
            <th width="10%">性别</th>
            <th width="10%">年龄</th>
            <th width="10%">电话</th>
            <th width="10%">用户角色</th>
            <th width="30%">操作</th>
          </tr>

          <tr v-for="u in result.list">
            <td>
              <span>{{ u.userCode }}</span>
            </td>
            <td>
              <span>{{ u.userName }}</span>
            </td>
            <td>
              <span>{{ u.userSex }}</span>
            </td>
            <td>
              <span>{{ u.userAge }}</span>
            </td>
            <td>
              <span>{{ u.phone }}</span>
            </td>
            <td>
              <span>{{ u.role.data.roleName }}</span>
            </td>
            <td>
              <span>
                <a class="viewUser" href="javascript:;" @click="showUser(u.id)">
                  <img src="../assets/images/read.png" alt="查看" title="查看"/>
                </a>
              </span>
              <span><a class="modifyUser" href="javascript:;" @click="updateUser(u.id)">
                <img src="../assets/images/xiugai.png" alt="修改"
                     title="修改"/></a></span>
              <span><a class="deleteUser" href="javascript:;">
                <img src="../assets/images/schu.png" alt="删除" title="删除" @click="deleteUser(u.id)"/></a></span>
            </td>
          </tr>

        </table>
        <input type="hidden" id="totalPageCount" value="3"/>

        <div class="page-bar">
          <ul class="page-num-ul clearfix">
            <li>共{{ result.total }}条记录&nbsp;&nbsp; {{ result.pageNum }}/{{ result.pages }}页</li>

            <a href="javascript:;;" @click="loadDataForUser(1)" v-if="result.pageNum!==1">首页</a>
            <a href="javascript:;;" @click="loadDataForUser(result.prePage)" v-if="result.pageNum!==1">上一页</a>
            <a href="javascript:;;" @click="loadDataForUser(result.nextPage)"
               v-if="result.pageNum!==result.pages">下一页</a>
            <a href="javascript:;;" @click="loadDataForUser(result.pages)" v-if="result.pageNum!==result.pages">最后一页</a>

            &nbsp;&nbsp;
          </ul>
          <span class="page-go-form"><label>跳转至</label>
	          <input type="number" :max="result.pages" :min="1" name="inputPage" id="inputPage" class="page-key"
                   v-model="nowPage"/>页
	          <button type="button" class="page-btn" @click="toPage">GO</button>
		      </span>
        </div>

      </div>
    </section>

    <!--点击删除按钮后弹出的页面-->
    <div class="zhezhao"></div>
    <div class="remove" id="removeUse">
      <div class="removerChid">
        <h2>提示</h2>
        <div class="removeMain">
          <p>你确定要删除该用户吗？</p>
          <a href="#" id="yes">确定</a>
          <a href="#" id="no">取消</a>
        </div>
      </div>
    </div>

    <footer class="footer">
      版权归关老师
    </footer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserManager",
  data() {
    return {
      result: {},
      nowPage: 1,
      userName: '',
      nickName: window.localStorage.getItem('nickName')
    }
  },
  created() {
    this.loadDataForUser(1)
  },
  methods: {
    loadDataForUser(page) {
      let _this = this;
      this.nowPage = page
      axios.get('/api/smbms-user/user/' + page, {
        headers: {
          token: window.localStorage.getItem('token')
        }
      })
          .then((response) => {
            if (response.status === 403) {
              _this.$router.push('login')
            } else {
              _this.result = response.data.data
            }
          }).catch(() => {
        _this.$router.push('login')
      })
    },
    toPage() {
      if (this.nowPage >= 1 && this.nowPage <= this.result.pages) {
        this.loadDataForUser(this.nowPage)
      }
      this.nowPage = 1
    },
    searchUser() {
      let _this = this
      if (this.userName.trim() === '') {
        this.userName = 'shinull'
      }
      axios.get('/api/smbms-user/user/search/' + this.userName)
          .then((response) => {
            _this.result = response.data.data
            if (_this.userName === 'shinull') {
              _this.userName = ''
            }

          })
    },
    deleteUser(uid) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this
        axios.delete('/api/smbms-user/user/' + uid + '/' + this.nowPage)
            .then((response) => {
              _this.result = response.data.data

              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showUser(uid) {
      this.$router.push({name: 'userShow', query: {id: uid}})
    },
    updateUser(uid) {
      this.$router.push({name: 'userUpdate', query: {id: uid}})
    },
    logout(){
      window.localStorage.removeItem('token')
      this.$router.push('login')
    }
  }
}
</script>


<style lang="css">
/*引入外部css文件*/
@import url('../assets/css/style.css');
@import url('../assets/css/public.css');
</style>